<script setup lang="ts">
import { ElSpace } from "element-plus";

import { LocaleDropdown } from "@/components/LocaleDropdown";
import { ThemeSwitch } from "@/components/ThemeSwitch";
import {SizeDropdown} from "@/components/SizeDropdown";
</script>

<template>
  <div class="loginHeader">
    <div class="left"></div>
    <ElSpace>
      <ThemeSwitch />
      <SizeDropdown />
      <LocaleDropdown />
    </ElSpace>
  </div>
</template>

<style lang="less" scoped>
.loginHeader {
  width: 100%;
  display: flex;
  align-items: center;
  position: absolute;
  left: 0;
  top: 0;
  padding: 20px 20px;
  box-sizing: border-box;

  .dropdown {
    cursor: pointer;
  }

  .left {
    flex: 1;
  }
}
</style>
